<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="300px" class="side">
        <el-collapse change="changeCurrent" v-model="current">
          <el-collapse-item
            v-for="(item, index) in area"
            :key="index"
            class="item"
            :title="item.province"
            :name="index + 1"
          >
            <div
              @click="changeArea(el)"
              v-for="(el, i) in item.child"
              :key="i"
              class="origin"
              :style="{ color: currentArea == el ? 'blue' : '#303133' }"
            >
              {{ el }}
            </div>
          </el-collapse-item>

          <el-collapse-item class="item" title="新增">
            <div class="origin" @click="dialogVisible = true">新增实例</div>
          </el-collapse-item>
        </el-collapse>
      </el-aside>

      <!-- 主要内容 -->
      <el-main class="main">
        <!-- 表格 -->
        <el-table
          v-loading="loading"
          class="main"
          :data="showTemplates"
          stripe
          style="width: 100%"
        >
          <el-table-column type="expand">
            <!-- 展开行 -->
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="实例描述 ">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="水箱数量 ">
                  <span>{{ props.row.tank }}</span>
                </el-form-item>
                <el-form-item label="循环泵数量">
                  <span>{{ props.row.pump }}</span>
                </el-form-item>
                <el-form-item label="板式换热器">
                  <span>{{ props.row.phe }}</span>
                </el-form-item>
                <el-form-item
                  v-for="(el, i) in props.row.heat_rod"
                  :key="i"
                  :label="i + 1 + '号加热棒'"
                  v-show="i<props.row.heat_rod_num"
                >
                  <span>{{ el }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="实例名"> </el-table-column>
          <el-table-column prop="config" label="配置"> </el-table-column>
          <el-table-column label="操作" fixed="right" width="260">
            <template slot-scope="scope">
              <el-button
                @click="deleteTemplate(scope.row)"
                type="danger"
                size="small"
                icon="el-icon-delete"
                >删除</el-button
              >
              <el-button
                @click="showDialog(scope.row)"
                type="primary"
                icon="el-icon-edit"
                size="small"
                >编辑</el-button
              >
              <el-button
                @click="goPaint(scope.row)"
                type="primary"
                icon="el-icon-edit"
                size="small"
                >绘制</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- 弹出框 -->
    <el-dialog title="修改实例" :visible.sync="dialogFormVisible">
      <el-form :model="changeForm">
        <el-form-item
          label="实例名称"
          :rules="[{ required: true, message: '名字不能为空' }]"
        >
          <el-input v-model="changeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="归属地"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <el-input v-model="changeForm.origin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="水箱数量"
          prop="tank"
          :rules="[
            { required: true, message: '数量不能为空' },
            { type: 'number', message: '必须为数字值' },
          ]"
        >
          <el-input
            type="tank"
            v-model.number="changeForm.tank"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="循环泵数量"
          prop="pump"
          :rules="[
            { required: true, message: '数量不能为空' },
            { type: 'number', message: '必须为数字值' },
          ]"
        >
          <el-input
            type="pump"
            v-model.number="changeForm.pump"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="板式换热器"
          prop="phe"
          :rules="[
            { required: true, message: '数量不能为空' },
            { type: 'number', message: '必须为数字值' },
          ]"
        >
          <el-input
            type="phe"
            v-model.number="changeForm.phe"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="加热棒数量"
          prop="heat_rod_num"
          :rules="[
            { required: true, message: '数量不能为空' },
            { type: 'number', message: '必须为数字值' },
          ]"
        >
          <el-input
            type="heat_rod_num"
            v-model.number="changeForm.heat_rod_num"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="加热棒编号">
          <el-input
            v-for="(el, i) in changeForm.heat_rod_num"
            :key="i"
            v-model.number="changeForm.heat_rod[i]"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitChange">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增弹出框 -->
    <el-dialog title="新增实例" :visible.sync="dialogVisible">
      <el-form :model="changeForm">
        <el-form-item label="选择模板">
          <el-select @change="changeUseTemplate" v-model="selectedTem" placeholder="请选择模板">
            <el-option v-for="(el,i) in templates" :key="i" :label="el.name" :value="el.id"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item
          label="实例名称"
          :rules="[{ required: true, message: '名字不能为空' }]"
        >
          <el-input v-model="changeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="归属地"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <el-input v-model="changeForm.origin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="水箱数量"
          prop="tank"
          :rules="[
            { required: true, message: '数量不能为空' },
            { type: 'number', message: '必须为数字值' },
          ]"
        >
          <el-input
            type="tank"
            v-model.number="changeForm.tank"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="循环泵数量"
          prop="pump"
          :rules="[
            { required: true, message: '数量不能为空' },
            { type: 'number', message: '必须为数字值' },
          ]"
        >
          <el-input
            type="pump"
            v-model.number="changeForm.pump"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="板式换热器"
          prop="phe"
          :rules="[
            { required: true, message: '数量不能为空' },
            { type: 'number', message: '必须为数字值' },
          ]"
        >
          <el-input
            type="phe"
            v-model.number="changeForm.phe"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="加热棒数量"
          prop="heat_rod_num"
          :rules="[
            { required: true, message: '数量不能为空' },
            { type: 'number', message: '必须为数字值' },
          ]"
        >
          <el-input
            type="heat_rod_num"
            v-model.number="changeForm.heat_rod_num"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="加热棒编号">
          <el-input
            v-for="(el, i) in changeForm.heat_rod_num"
            :key="i"
            v-model.number="changeForm.heat_rod[i]"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { deleteExa, changeExa, addExa } from "../api/examples";
export default {
  data() {
    return {
      selectedTem:1,
      loading: true,
      dialogFormVisible: false,
      dialogVisible: false,
      current: "",
      currentArea: "沈阳",
      changeForm: {
        name: "",
        origin: "",
        tank: 1,
        pump: 1,
        phe: 1,
        heat_rod_num: 2,
        heat_rod: ["一号加热棒", "二号加热棒"],
      },
      showTemplates: [],
      area: [
        {
          province: "辽宁",
          child: ["沈阳", "大连", "丹东"],
        },
        {
          province: "北京",
          child: ["北京"],
        },
        {
          province: "河北",
          child: ["保定", "廊坊"],
        },
      ],
    };
  },
  methods: {
    changeCurrent(activeNames) {
      console.log(activeNames);
    },
    changeArea(area) {
      this.loading = true;
      this.currentArea = area;
      setTimeout(() => {
        this.loading = false;
        this.showTemplates = this.examples.filter((el) => el.origin == area);
      }, 800);
    },
    // 删除
    deleteTemplate(data) {
      this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteExa(data.id).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.loading = true;
            this.$store.dispatch("getExample");
            setTimeout(() => {
              this.changeArea(this.currentArea);
            }, 10);
            setTimeout(() => {
              this.loading = false;
            }, 1200);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 显示修改框
    showDialog(data) {
      this.changeForm = { ...data };
      this.dialogFormVisible = true;
    },
    // 提交修改
    submitChange() {
      changeExa(this.changeForm).then(() => {
        this.dialogFormVisible = false;
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.loading = true;
        this.$store.dispatch("getExample");
        setTimeout(() => {
          this.changeArea(this.currentArea);
        }, 10);
        setTimeout(() => {
          this.loading = false;
        }, 1200);
      });
    },
    // 提交新增
    submitAdd() {
      let a = {...this.changeForm}
      delete a.id
      addExa(a).then(() => {
        this.dialogVisible = false;
        this.$message({
          message: "新增成功",
          type: "success",
        });
        this.loading = true;
        setTimeout(() => {
          this.changeArea(this.currentArea);
        }, 10);
        setTimeout(() => {
          this.loading = false;
        }, 1200);
        this.$store.dispatch("getExample");
      });
    },
    // 修改选中模板
    changeUseTemplate(id){
      this.changeForm = this.templates.find(el=> el.id==id)
      return id
    },
    // 去绘制页
    goPaint(data){
      data = JSON.stringify(data)
      this.$router.push({path:'/config', query: {data,leibie:'example'}})
    }
  },
  created() {
    this.$store.dispatch("getExample");
    this.$store.dispatch("getTemplates");
    setTimeout(() => {
      this.changeArea("沈阳");
    }, 10);
    setTimeout(() => {
      this.loading = false;
      this.changeForm = this.templates[0]
    }, 2500);
  },
  computed: {
    ...mapState(["examples","templates"]),
  },
};
</script>

<style scoped>
.side {
  height: 91vh;
  background: white;
}
.item {
  padding-left: 15px;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.main {
  min-height: 88vh;
}
.origin {
  width: 90%;
  padding-left: 5px;
  text-align: left;
  height: 25px;
  line-height: 25px;
  margin: 10px 0;
  cursor: pointer;
}
</style>